<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="props.id?'修改出院申请':'新增出院申请'" width="500" :before-close="handleClose">
      <span>
        <!-- 表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon>
          <el-form-item label="老人：">
            <el-button @click="select">{{ props.currentName?props.currentName:selectName }}</el-button>
          </el-form-item>
          <el-form-item label="出院原因：" prop="reason">
            <el-input v-model="ruleForm.reason" type="textarea" clearable />
          </el-form-item>
          <el-form-item label="预计时间：" prop="expectDate">
            <el-date-picker
              v-model="ruleForm.expectDate"
              value-format="YYYY-MM-DD"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="sure(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <selectElderly v-if="selectDialogVisible" @close="closeHandle" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps } from "vue";
import { AddParams } from "../../../api/market/discharge/type";
import selectElderly from "./selectElderly.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import {
  addDischarge,
  getDischargeModel,
  updateDischarge,
} from "../../../api/market/discharge/discharge";
import { onMounted } from "vue";
import { getElderlyModel } from "../../../api/market/elderly/elderly";
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<AddParams>({
  elderlyId: 0,
  reason: "",
  expectDate: "",
});

const props = defineProps({
  id: Number,
  currentName:String
});
// console.log("props11", props.currentName);

const emit = defineEmits(["close"]);

//dialog默认显示
const dialogVisible = ref(true);
//选择老人dialog
const selectDialogVisible = ref(false);

//选择老人
const select = () => {
  selectDialogVisible.value = true;
};

//规则
const rules = reactive<FormRules<AddParams>>({
  reason: [{ required: true, message: "请输入出院原因", trigger: "blur" }],
  expectDate: [
    {
      required: true,
      message: "请选择预计时间",
      trigger: "change",
    },
  ],
});

//取消
const handleClose = () => {
  emit("close");
};
//确定
const sure = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!ruleForm.elderlyId) {
        ElMessage.error("请选择老人");
        return;
      }

      if (ruleForm.id) {
        //修改
        await updateDischarge(ruleForm);
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      } else {
        //添加
        await addDischarge(ruleForm);
        ElMessage({
          message: "新增成功",
          type: "success",
        });
      }
      emit("close", true);
    } else {
      ElMessage({
        message: "error submit!",
        type: "warning",
      });
    }
  });
};

//选择老人姓名
let selectName = ref("选择老人");

//关闭dialog
const closeHandle = (data: any) => {
  selectDialogVisible.value = false;
  if (data) {
    //老人id
    ruleForm.elderlyId = data.id;
    selectName.value = data.name;
  }
};

//获取详情
const getDetail = async (id: number) => {
  let res = await getDischargeModel(id);
  console.log("详情",res);
  
  Object.assign(ruleForm, res);
  //老人名字
  selectName.value=res.elderlyName;
};

onMounted(() => {
  if (props.id) {
    //详情
    getDetail(props.id);
  }
});
</script>

<style scoped></style>
